<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-size: 0;
        }

        h1 {
            width: 1178px;
            font: 30px/47px "微软雅黑";
            text-align: center;
            padding-left: -58px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        #main {
            width: 1178px;
            height: 466px;
            margin: 10px 8px;
            position: relative;
        }

        .imge {
            width: 230px;
            height: 230px;
            position: absolute;
        }

        .imge08 {
            bottom: 0;
        }

        .imge12 {
            left: 236px;
        }

        .imge-other {
            width: 230px;
            height: 100%;
            position: absolute;
        }

        .imge07 {
            top: 0;
            left: 472px;
        }

        .imge09 {
            bottom: 0;
            left: 472px;
        }

        .imge10 {
            top: 0;
            left: 708px;
        }

        .imge11 {
            top: 0;
            left: 944px;
        }

        .imge06 {
            bottom: 0;
            left: 708px;

        }

        .imge-others {
            width: 466px;
            height: 230px;
            position: absolute;
        }

        .footer {
            font: 12px/39px "微软雅黑";
            height: 39px;
            width: 100%;
            /*定位在底边*/
            position: absolute;
            bottom: 0;
            right: 0;
            color: #ffffff;
            text-align: center;
            background: #000;
            /*透明度*/
            opacity: 0.5;
            /*针对IE6/7的*/
            filter: opacity(50);
        }
    </style>
</head>
<body>
<h1>热门推荐</h1>
<div id="main">
    <div class="imge">
        <img src="imag/5.jpeg" alt="">
        <span class="footer">超级月亮</span>
    </div>
    <div class="imge imge08">
        <img src="imag/8.jpg" alt="">
        <span class="footer">空间交互交接</span>
    </div>
    <div class="imge-other imge12">
        <img src="imag/12.jpg" alt="">
        <span class="footer">太空科学</span>
    </div>
    <div class="imge imge07">
        <img src="imag/7.png" alt="">
        <span class="footer">拓扑相变</span>
    </div>
    <div class="imge imge09">
        <img src="imag/9.jpg" alt="">
        <span class="footer">音爆</span>
    </div>
    <div class="imge imge10">
        <img src="imag/10.jpg" alt="">
        <span class="footer">神州十一号飞船</span>
    </div>
    <div class="imge imge11">
        <img src="imag/11.jpeg" alt="">
        <span class="footer">细胞自噬</span>
    </div>
    <div class="imge-others imge06">
        <img src="imag/6.jpg" alt="">
        <span class="footer">太阳能发电</span>
    </div>

</div>
</body>
</html>